<template>
  <q-page class="q-pa-md">
    <div class="row q-col-gutter-md">
      <div class="nounderline col-sm-6 col-xs-12" v-for="(item,index) in menuList" :key="index">
        <router-link :to="item.url">
          <q-card class="my-card">
            <q-card-section class="text-center">
              <q-icon :name="item.img" size="5rem" color="primary" />
            </q-card-section>
            <q-card-section class="text-center">
              <q-btn flat :to="item.url">{{item.name}}</q-btn>
            </q-card-section>
          </q-card>
        </router-link>
      </div>
    </div>
  </q-page>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'managePageIndex',
  data () {
    return {
      // menuList: [
      //   { name: '充值查', url: '/thirdservicerenewstatus', img: 'money' },
      //   { name: '备份情况', url: '/backupstatus', img: 'backup' },
      //   { name: '数据分析', url: '/dataanalysis', img: 'date' },
      //   { name: '辅助工具', url: '/extratool', img: 'tool' }
      // ]
    }
  },
  computed: {
    ...mapState({
      menuList: state => state.menus.menuList.manageMenuList
      // menus: state => state.menus
    })
    // menuList () {
    //   return this.$store.state.menus.menuList
    // }
  }
}
</script>
<style scoped>
  a.nounderline, .nounderline a {  text-decoration: none;}
</style>
